<template>
    <div id="lrc">
     {{ getAllKey}}
        <div class="lrc-content" ref="lrc">
           <p v-if="currentTime" ref="p" :class ="{active:parseInt(currentTime) >= keyArr[index] && parseInt(currentTime)< keyArr[index+1]}" v-for="(ly,key,index) in lrc" :key="index">
              {{ly}} {{scrollrc(key,index)}}
           </p>
        </div>
    </div>
</template>

<script>
    export default {
        name: "lrc",
        props:{
          songId:{
            type:[String,Number],
            default:''
          },
          durationTime:{
            type:[Number,String],
            default:0
          },
          currentTime:{
            type:[Number,String],
            default:0
          }
        },
      data(){
          return{
            lrc:{},
            songinfo:{},
            keyArr:[]
          }

      },
      methods:{
        scrollrc(k,i){
          const lreDiv = this.$refs.lrc;

          if(k<parseInt(this.currentTime) && k> (parseInt(this.currentTime) - (this.keyArr[i+1]-this.keyArr[i]))){
            // lreDiv.style.top =+'px';
            lreDiv.style.transform = `translateY(${-((i-2)*28)}px)`
            lreDiv.style.webkitTransform = `translateY(${-((i-2)*28)}px)`

          }
        }
      },
      computed:{
         getAllKey(){for(let i in this.lrc){
             i= ( i == undefined?'':i);
             console.log(i)
            this.keyArr.push(i)
           }
         }
      },
      mounted(){
        let url = this.host + `/v1/restserver/ting?method=baidu.ting.song.lry&songid=${this.songId}`
        this.$axios.get(url).then(res=>{
          let lyrics = res.data.lrcContent.split('\n');
          let lrcObj = {};

         for(let i = 0;i<lyrics.length;i++){
            let lyric = decodeURIComponent(lyrics[i])
            let timereg = /\[\d*:\d*((\.|\:)\d*)*\]/g;
            let timeregArr = lyric.match(timereg);

            if(!timeregArr) {
              continue
            };
           let clause =lyric.replace(timereg,'')
            for(let i= 0;i<timeregArr.length;i++){
               let t =timeregArr[i];
               let min = Number(String(t.match(/\[\d*/i)).slice(1))
               let sec = Number(String(t.match(/\:\d*/i)).slice(1));
               let time = min*60 + sec;
              lrcObj[time] = clause
            }
          }
            this.lrc = lrcObj;

        }).catch(err=>{

        })
      }
    }
</script>

<style scoped lang="less">
 #lrc{
   height: 150px;
   overflow: hidden;
   margin-top: 20px;
   padding-bottom: 10px;
   position: relative;
   .lrc-content{
     transform: translateY(0);
     transition: all 0.5s ease-out;
     width: 100%;
     font-size: 13px;
     color: #666;
     line-height: 28px;

     .active{
       color: #e13228;
       font-size: 15px;
       font-weight: 600;
     }
   }
 }
</style>
